<template>
  <div class="module">
    <MTitle ref="title" icon="sxfx" @search="initData"></MTitle>
    <MBox>
      <MTabs :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="content-box">
        <div class="carousel-wrapper" v-if="showData.length>0">
          <el-carousel :class="{hide:showData.length<=6}" height="190px" arrow="always" :autoplay="false">
            <el-carousel-item v-for="(item,index) in (Math.ceil(showData.length/6))" :key="index + '-'+activeIndex">
              <div class="item-wrapper">
                <div class="item-box">
                  <div class="item" v-for="(o,i) in 6" :key="i" v-if="showData[index * 6 + i]">
                  <span class="title">
                    <ScrollListX :data="showData[index * 6 + i].name">
                    <span class="title" style="padding: 0 5px">{{ showData[index * 6 + i].name }}</span>
                    </ScrollListX>
                    </span>
                    <i class="icon">{{ showData[index * 6 + i].count }}</i>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="container kong" v-else>
          <Kong emptyText="安全生产，人人有责。"></Kong>
        </div>
      </div>
    </MBox>
  </div>
</template>

<script>
import MTitle from "../base-com/m-title/m-title";
import MBox from "../base-com/m-box/m-box";
import MTabs from '../base-com/m-tabs/m-tabs'
import ScrollListX from '../base-com/scroll-list/scroll-list-x'
import Kong from '../base-com/kong/kong'
import { agingAnalysis } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs,
    ScrollListX,
    Kong
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          name: '确警超时统计',
          value: 'confirm',
        },
        {
          name: '处理超时统计',
          value: 'processed',
        },
      ],
      dataAll: {
        confirm: [],
        processed: []
      },
      showData: []
    };
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      agingAnalysis(searchData).then(res => {
        const result = res.result || {
          confirm: [],
          processed: []
        }
        result.confirm.sort((value1, value2) => {
          let a = value1.count
          let b = value2.count
          return a < b ? 1 : a > b ? -1 : 0
        })
        result.confirm = result.confirm.filter(item => {
          return item.count > 0
        })
        result.processed.sort((value1, value2) => {
          let a = value1.count
          let b = value2.count
          return a < b ? 1 : a > b ? -1 : 0
        })
        result.processed = result.processed.filter(item => {
          return item.count > 0
        })
        this.dataAll = result
        this.initChart();
      })
    },
    tabChange(index) {
      this.activeIndex = index
      this.initChart();
    },
    initChart() {
      const data = this.dataAll[this.list[this.activeIndex].value]
      this.showData = data
    }
  },
};
</script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 100%;
  position: relative;
  .carousel-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 330px;
      height: 58px;
      background: url("./images/round.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  .item-wrapper {
    width: 352px;
    height: 110px;
    background: url("./images/bg.png") no-repeat center;
    background-size: 100% 100%;
    background-position: 0 7px;
    margin: 0 auto;
    position: relative;
    .item-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      .item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
          font-size: 12px;
          line-height: 16px;
          color: #00E4FF;
          text-align: center;
          width: 70px;
          height: 16px;
        }
        .icon {
          display: block;
          width: 56px;
          height: 56px;
          background: url("./images/icon.png") no-repeat center;
          background-size: 100% 100%;
          color: #fff;
          text-align: center;
          font-size: 14px;
          line-height: 14px;
          font-style: normal;
          padding-top: 25px;
        }
      }
    }
  }
  ::v-deep .el-carousel {
    .el-carousel__indicators {
      display: none;
    }
    .el-carousel__arrow {
      top: 61px;
      width: 34px;
      height: 43px;
      > i {
        display: none;
      }
      &.el-carousel__arrow--left {
        background: url("./images/left.png") no-repeat center;
        background-size: 100% 100%;
      }
      &.el-carousel__arrow--right {
        background: url("./images/right.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    &.hide {
      .el-carousel__arrow {
        display: none;
      }
    }
  }
}
.small {
  color: #fff;
}
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 40px 10px;
  &.kong{
    padding: 5px 15px 20px;
  }
}
</style>
